<template>
	<a-form :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" @submit="handleSubmit">
		<a-row :gutter="24" :span="12">
			<a-col :span="22" :wrapper="2" pull="3">
				<a-form-item label="岗位名称" prop="postName">
					<a-input v-decorator="['postName', { rules: [{ required: true, message: '请输入岗位名称' }] }]" placeholder="请输入权限字符"> </a-input>
				</a-form-item>
			</a-col>
			<a-col :span="22" :wrapper="2" pull="3">
				<a-form-item label="岗位编码" prop="postCode">
					<a-input v-decorator="['postCode', { rules: [{ required: true, message: '请输入角色名称' }] }]" placeholder="请输入角色名称"> </a-input>
				</a-form-item>
			</a-col>
			<a-col :span="22" :wrapper="2" pull="3">
				<a-form-item label="显示顺序" prop="roleSort">
					<a-input v-decorator="['roleSort', { rules: [{ required: true, message: '请输入显示顺序' }] }]" placeholder="请输入显示顺序"> </a-input>
				</a-form-item>
			</a-col>
			<a-col :span="22" :wrapper="2" pull="3">
				<a-form-item label="权限字符" prop="roleKey">
					<a-input v-decorator="['roleKey', { rules: [{ message: '请输入权限字符' }] }]" placeholder="请输入权限字符"> </a-input>
				</a-form-item>
			</a-col>
			<a-col :span="22" :wrapper="2" pull="3">
				<a-form-item label="显示顺序" prop="roleSort">
					<a-input v-decorator="['roleSort', { rules: [{ message: '请输入显示顺序' }] }]" placeholder="请输入显示顺序"> </a-input>
				</a-form-item>
			</a-col>
			<a-col :span="22" :wrapper="2" pull="3">
				<a-form-item label="状态" prop="status">
					<a-radio-group v-model="value">
						<a-radio :value="1"> 正常 </a-radio>
						<a-radio :value="2"> 正常</a-radio>
					</a-radio-group>
				</a-form-item>
			</a-col>
			<a-col :span="22" :wrapper="2" pull="3">
				<a-form-model-item label="备注" prop="remark"> <a-input v-model="form.desc" type="textarea" /> </a-form-model-item>
			</a-col>
		</a-row>

		<a-form-item :wrapper-col="{ span: 24, offset: 10 }">
			<a-button type="primary" html-type="submit"> 提交 </a-button>
		</a-form-item>
		<!-- <a-form-item :wrapper-col="{ span: 12 }">
			<a-button type="primary" html-type="submit"> Submit </a-button>
			<a-button type="primary" html-type="submit"> Submit </a-button>
		</a-form-item> -->
	</a-form>
</template>

<script>
const treeData = [
	{
		title: '系统管理',
		key: '0-0',
		children: [
			{
				title: '用户管理',
				key: '0-0-0',
				children: [
					{ title: '用户查询', key: '用户查询' },
					{ title: '用户新增', key: '用户新增' },
					{ title: '用户修改', key: '用户修改' },
				],
			},
			{
				title: '角色管理',
				key: '0-0-1',
				children: [
					{ title: '角色查询', key: '角色查询' },
					{ title: '角色新增', key: '角色新增' },
					{ title: '角色修改', key: '角色修改' },
				],
			},
			{
				title: '若依官网',
				key: '0-0-2',
			},
		],
	},
];
export default {
	data() {
		return {
			expandedKeys: ['0-0-0', '0-0-1'],
			autoExpandParent: true,
			checkedKeys: ['0-0-0'],
			selectedKeys: [],
			treeData,
			value: 1,
			// value: undefined,
			formLayout: 'horizontal',
			form: this.$form.createForm(this, { name: 'coordinated' }),
		};
	},
	methods: {
		// 状态选择
		onChange(e) {
			console.log('radio checked', e.target.value);
		},
		onSelect(selectedKeys, info) {
			console.log('onSelect', info);
			this.selectedKeys = selectedKeys;
		},
		handleSubmit(e) {
			e.preventDefault();
			this.form.validateFields((err, values) => {
				if (!err) {
					console.log('Received values of form: ', values);
				}
			});
		},
		handleSelectChange(value) {
			console.log(value);
			// this.form.setFieldsValue({
			// 	note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
			// });
		},
	},
};
</script>
